import React, {PureComponent} from 'react';
import {
	Dimensions,
	Image,
	ListView,
	StyleSheet,
	Text,
	View,
	TouchableOpacity
} from 'react-native';

// 导入JSON数据
const Wine = require('./../../Wine.json').data;
// 获取屏幕宽度, 冒号设置别名
let {width: WIDTH} = Dimensions.get('window');

/**
 * @FileName: GListViewDemo
 * @Author: mazaiting
 * @Date: 2018/6/11
 * @Description:
 */
class GListViewDemo extends PureComponent {
	constructor(props) {
		super(props);
		// 1.1 设置数据源
		// 设置只有在两行数据完全不同的时候才去绘制
		let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
		// 设置初始值
		this.state = {
			dataSource: ds.cloneWithRows(Wine)
		}
	}
	
	/**
	 * 设置Render函数
	 * @author mazaiting
	 */
	render() {
		return (
			<ListView
				// 设置数据源
				dataSource={this.state.dataSource}
				// 方法的四个参数：rowData, sectionID, rowID, highlightRow
				renderRow={(rowData, sectionID, rowID, highlightRow) => this.renderRow(rowData, sectionID, rowID, highlightRow)}
			/>
		)
	}
	
	/**
	 * 返回具体的cell
	 */
	renderRow(rowData, sectionID, rowID, highlightRow) {
		return (
			<TouchableOpacity
				activeOpacity={0.5}
				onPress={() => alert(rowData.name)}
			>
				<View style={styles.cellViewStyle}>
					{/*左边的图片*/}
					<Image source={{uri: rowData.image}} style={styles.leftImageStyle}/>
					{/*右边的View*/}
					<View style={styles.rightViewStyle}>
						{/*上边的Text*/}
						<Text style={styles.topTitleStyle}>{rowData.name}</Text>
						{/*下边的Text*/}
						<Text style={styles.bottomTitleStyle}>{rowData.money}</Text>
					</View>
				</View>
			</TouchableOpacity>
		)
	}
}

/**
 * 样式属性
 */
const styles = StyleSheet.create({
	container: {
		backgroundColor: '#DDD'
	},
	cellViewStyle: {
		padding: 10,
		// 下划线
		borderBottomWidth: 0.5,
		borderBottomColor: '#E8E8E8',
		// 设置主轴水平
		flexDirection: 'row'
	},
	leftImageStyle: {
		marginRight: 10,
		width: 60,
		height: 60
	},
	rightViewStyle: {
		// 设置主轴对齐方式
		justifyContent: 'center'
	},
	topTitleStyle: {
		width: WIDTH * 0.7,
		color: 'red',
		marginBottom: 8,
		fontSize: 15
	},
	bottomTitleStyle: {
		color: 'blue',
	}
});

/**
 * 导出当前Module
 */
module.exports = GListViewDemo;